<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style-type: none;
			}
			.tab {
				width: 778px;
				margin: 100px auto;
			}
			.tab_list {
				height: 39px;
				border: 1px solid #ccc;
				background-color: #f1f1f1;
				border-bottom: 1px solid #c81623;
			}
			.tab_list li {
				float: left;
				height: 39px;
				line-height: 39px;
				padding: 0 20px;
				text-align: center;
				cursor: pointer;
			}
			.tab_list .current {
				background-color: #c81623;
				color: #fff;
			}
			.tab_con {
				border: 1px solid #ccc;
				border-top: none;
				height: 200px;
			}
			.item {
				display: none;
				padding-top: 10px;
			}
			.item li {
				height: 35px;
				line-height: 35px;
				padding-left: 20px;
			}
			.item p {
				padding: 10px 20px;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价（1000+）</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="tab_con">
				<div class="item" style="display: block;">
					商品名称：华为P50 商品编号：100014453207
				</div>
				<div class="item">
					机身重量：181g 机身长度：156.5mm 机身宽度：73.8mm
				</div>
				<div class="item">
					售后服务电话：950800
				</div>
				<div class="item">
					使用手感舒适，系统操作流畅，选择华为，支持国货。
				</div>
				<div class="item">
					信号很好下载东西20几m一秒很快
				</div>
			</div>
		</div>
		<script>
			var tab_list = document.querySelector('.tab_list'); // 获取标签部分的所有元素对象
			var lis = tab_list.querySelectorAll('li');
			var items = document.querySelectorAll('.item'); // 获取内容部分的所有内容对象
			for (let i = 0; i < lis.length; i++) { // for循环绑定点击事件
				lis[i].onmouseover = function() {
					for (let j = 0; j < lis.length; j++) {
						lis[j].className = '';
					  items[j].style.display = 'none';
					}
				this.className = 'current';
	            items[i].style.display = 'block';	
				};
			}
		</script>
	</body>
</html>